<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>QingFM App</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/demo.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="alert alert-info" role="alert">
        Tip:当您访问本网站时，我们的服务器会自动收集某些浏览器或设备生成的信息，包括但不限于：域名、IP地址、您访问的日期、时间和持续时间、浏览器类型、操作系统 和 页面访问情况。
    </div>

    <div class="page-header">
        <h1>青年电台 <small>Youth FM</small></h1>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading title_channel">电台列表</div>
                    <div class="panel-body">
                        <ul class="ul_regions">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading title_channel">电台列表</div>
                    <div class="panel-body">
                        <ul class="ul_channels">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading title_live">播放区域</div>
                    <div class="panel-body">
                        音量控制<input id="volume" type="range" min="0" max="100" value="60">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>




    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript">

        var audio = null;

        /**
         * 初始化Audio
         */
        function initAudio() {
            audio = document.createElement('audio') //生成一个audio元素
            audio.controls = false //这样控件才能显示出来
            document.body.appendChild(audio) //把它添加到页面中
        }

        /**
         * 从服务端获取音频数据
         */
        function load(url) {
            if(!audio){
                initAudio();
            }
            audio.pause();
            //audio.src = '/static/source/demo.mp3'; //音乐的路径
            audio.src = url;
            audio.autoplay = true;
            audio.load();
            audio.play();
        }

        /**
         * 改变Audio音量
         * @param val
         */
        function changeVolume (val) {
            audio.volume = oldVolume * oldVolume;
        }

        /**
         * 监听Audio Volume值事件
         */
        $('#volume').on('change', function () {
            changeVolume(this.value / this.max)
        });

        /**
         * 加载地域列表
         */
        function loadRegions() {
            $.ajax({
                type: 'post',
                url: './fm/regions',
                data: {},
                dataType: "json",
                async: false,
                success: function (r) {
                    console.log(r);
                    var html = '';
                    for(var _i = 0; _i < r.data.length; _i++){
                        html += '<li data-option="' + r.data[_i].id + '">' + r.data[_i].title + '</li>';
                    }
                    $('.ul_regions').html(html);
                }
            });
        }

        /**
         * 监听点击事件
         */
        function listernClick () {
            $('.ul_regions>li').on('click', function() {
                $('.title_channel').html($(this).html() + '电台列表');
                $.ajax({
                    type: 'post',
                    url: './fm/channels',
                    data: {
                        'channel': $(this).attr('data-option')
                    },
                    dataType: "json",
                    async: false,
                    success: function (r) {
                        var html = '';
                        for(var _i = 0; _i < r.data.items.length; _i++){
                            html += '<li data-option="' + r.data.items[_i].content_id + '" cover="' + r.data.items[_i].cover + '">' + r.data.items[_i].title + '</li>';
                        }
                        $('.ul_channels').html(html);

                        $('.ul_channels>li').on('click', function() {
                            var id = $(this).attr('data-option');
                            ///fm/live
                            $('.title_live').html('正在播放：' + $(this).html());
                            $.ajax({
                                type: 'post',
                                url: './fm/live',
                                data: {
                                    'id': id
                                },
                                dataType: "json",
                                async: false,
                                success: function (r) {
                                    load(r.data);
                                }
                            });
                        });

                    }
                });
            });
        }

        $(function(){
            initAudio();
            loadRegions();
            listernClick();
            $("#volume")[0].onchange();
        });
    </script>
</body>
</html>
